﻿/*****************************
 * tuogesoft-web style  
 * 源于 web.tuogesoft.com 驼格软件
 * 专业精品网站建设、UI设计、软件开发、App、小程序、外包服务
 -----------------------------
  Global.css
 -----------------------------
  $1 - reset & basic
  $2 - header
  $3 - nav 
  $4 - layout
  $5 - footer  
  $6 - pager  
  $7 - QQ
  $8 - side contact 
  $9 - home page
  $10 - list page
 ****************************/

/*
 * $1 reset & basic
 */

@charset "utf-8"; 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img { border: medium none; margin:0; padding:0; font-size:100%;  -webkit-text-size-adjust:none;}
body, button, input, select, textarea { font: 12px/1.5 微软雅黑,Arial, Sans-Serif,Verdana; }
body { text-align:center; background: #f6f6f9; min-width: 1220px }
/* force a vertical scrollbar in firefox, prevents horizontal page shifting */
html { min-height: 100%; margin-bottom: 1px;}
html { overflow-y: scroll;}
img { border: 0px; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em { font-style: normal; }
ul, ol { list-style: none; }
a { color:#333; text-decoration: none; }
a:hover { color:#ff3300; text-decoration:none; }
.green { color:#68b426; text-decoration: none; }
.green:hover { color:#ff3300; text-decoration:underline; }
div.transp { /* make the div translucent */
opacity: 0.6;                 /* Firefox, Safari(WebKit), Opera)
filter: "alpha(opacity=60)"; /* IE 8 */
filter: alpha(opacity=60);   /* IE 4-7 */
zoom: 1;                     /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */ 
}

.cf:after { content:" "; clear: both; display: block; font-size: 0; height: 0; visibility: hidden; }
.cf { display: inline-table; zoom:1; } 
.ip { width:300px;line-height:18px; height:18px; border:#afafaf 1px solid; padding:2px 5px 2px 5px; }
.iparea { width:300px; height:150px; line-height:18px;border:#afafaf 1px solid; padding:2px 5px 2px 5px; }
.ip_small { width:150px; line-height:18px; height:18px; border:#afafaf 1px solid; padding:2px 5px 2px 5px; }
.ip_num { width:50px; line-height:18px; height:18px; border:#afafaf 1px solid; padding:2px 5px 2px 5px; }
.required { color:Red; margin-left:5px; }
/* Hides from IE-mac \*/
*html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */ 
 
select { border:1px #999 solid;} 
.c { width:1200px; overflow:hidden; margin:auto; text-align:left; padding:0 10px 0 10px; }
.sp { height:10px; overflow:hidden; }
.sp1 { height:1px; overflow:hidden; }
.clear { clear:both; }

input[type="text"] { -moz-border-radius:3px; border-radius:3px; border:1px solid #b8b8b8; }  
input[type="text"]:focus { border:1px solid #f37909; } 
input[type="password"] { -moz-border-radius:3px; border-radius:3px; border:1px solid #b8b8b8; }  
input[type="password"]:focus { border:1px solid #f37909; } 
textarea  { -moz-border-radius:3px; border-radius:3px; border:1px solid #b8b8b8; } 
textarea:focus { border:1px solid #f37909; } 
 
/*
 * $2 header
 */ 
 .top-nav { height:31px; line-height:31px; border-bottom:solid 1px #fff; background:#F7F7F7; }
 .top-nav .links { float:right; width:300px; overflow:hidden; text-align:right; color:#ccc; } 
 .top-nav .left { float:left; width:600px; overflow:hidden; color:#1e7c20; } 
 .header { height:60px; overflow:hidden; background:#65b85c; margin-bottom:20px; }
 .header .logo { float:left; width:200px; height:60px; background:url('../images/logo.gif') no-repeat ; overflow:hidden; } 
 .header .logo a { display:block; width:213px; height:65px; padding-top:200px; } 
 .header .nav-links { display:inline-block; float:left; width:500px; line-height:60px; overflow:hidden; text-align:left; } 
 .header .nav-links a { font-size:16px; color:#fff; margin:20px; }
 
 .top { height:60px; background:#fff; }
 .top .logo { float:left; width:200px; height:60px; background:url('../images/logo.gif') 0 5px no-repeat ; overflow:hidden; } 
 .top .logo a { display:block; width:213px; height:65px; padding-top:200px; } 
 .top .date { float:right; padding-top:20px; color:#aaa; }
 
/*
 * $3 nav
 */  
 
.nav { height:50px; line-height:50px; overflow:hidden; font-size:16px; font-weight:lighter; background:#0aa770; margin-bottom:20px; }
.nav a { display:inline-block; float:left; margin:0 72px 0 72px; }
.nav a:link { color:#fff; }
.nav a:visited { color:#fff; }
.nav a:hover { color:#fff; }

.crumbs { color:#999999; padding:0px 0px 10px 0px; font-size:12px; font-weight:lighter; line-height:24px; }
.crumbs span { color:#999999; } 
.crumbs .welcome { color:#ccc; font-family:Verdana; } 
.crumbs a:link { color: #999999; text-decoration: none; }
.crumbs a:visited { color: #999999; text-decoration: none; }
.crumbs a:hover { color: #ff6600; text-decoration::underline; }
.crumbs a:active { color: #999999; text-decoration: none; } 

.menu-left { border:solid #e0e0e0 1px; background-color:#fff; }
.menu-left .head { height:50px; background:#fafafa; line-height:50px; text-align:center; font-weight:bold; font-size:16px; color:#555555; border-bottom:solid #e0e0e0 1px; }
.menu-left .bottom { height:1px; overflow:hidden; border-top:solid 0px #eee; }
.menu-left ul li { height:50px; overflow:hidden; border-bottom:solid #eee 1px; }
.menu-left ul li a { display:block; width:150px; height:50px; line-height:50px; font-size:16px; text-decoration:none; text-align:center; }
.menu-left ul li a:hover { color:#d60100; } 
.menu-left ul li.on a { color:#d60100; } 

/*
 * $4 layout
 */ 
._2col_left_main .side-content  { float:left; overflow:hidden; width:280px; } 
._2col_left_main .main-content { padding:0px 20px 0px 0; border-width:0px; width:900px; float:left; overflow:hidden; }  
._2col_left_main .main-content .main-content-title { border-bottom:solid #e0e0e0 1px; background:#fafafa; height:32px; line-height:32px; padding-left:20px; font-size:14px; color:#555555; }
 
.box { border:solid 1px #cecece; padding:12px 0px 0px 12px; background-color:#fff; }
.box h2 { padding:0px 0px 5px 0px; margin:0px; color:#488848; font-size:14px; font-weight:bold; }
.box a:hover h2 { color:#ff3300; }
.box ul li { float:left; line-height:28px; height:28px; overflow:hidden; font-size:14px; }


/*首页*/
.hp-area-row1 {}
.hp-area-row1 .hp-area-row1-col-1 { width:900px; float:left; }
.hp-area-row1 .hp-area-row1-col-2 { width:280px; float:left; background:#eee; margin-left:20px; height:194px; margin-top:1px; }
.hp-area-row1 .logos-site { }
.hp-area-row1 .logos-site ul li { float:left; height:98px; width:150px; overflow:hidden; text-align:center; }
.hp-area-row1 .logos-site ul li a { display:block; height:56px; width:148px; overflow:hidden; border:solid 1px #f0eff4; background:#fff; padding:20px 0 20px 0; }
.hp-area-row1 .logos-site ul li img { width:100px; height:40px; }
.hp-area-row1 .logos-site ul li a span { display:block; line-height:24px; font-size:14px; text-align:center; color:#ccd5e2; text-decoration:none; }
.hp-area-row1 .logos-site ul li a:hover { text-decoration:none; border:solid 1px #65b85c; }
.hp-area-row1 .hp-area-row1-col-2 img { width:280px; height:194px; }

.hp-banner-ad { background:#eee; margin:20px 0 0 0; }
.hp-banner-ad img { width:1200px; }

.hp-link-groups { margin-top:20px; }
.hp-link-groups .link-group { width:263px; border:solid 1px #f0eff4; float:left; padding:20px 0 20px 20px; margin-right:20px; background:#fff; }
.hp-link-groups .link-group-last { width:263px; margin-right:0; }
.hp-link-groups .link-group-title { line-height:34px; height:40px; }
.hp-link-groups .link-group-title i { float:left; font-family:Arial; color:#fff; background:#65b85c; font-style:normal; font-size:24px; font-weight:bold; display:inline-block; line-height:30px; width:30px; height:30px; overflow:hidden; text-align:center; margin-right:10px; }
.hp-link-groups .link-group-title span { float:left; width:100px; color:#666; font-size:18px; display:inline-block; }
.hp-link-groups .link-group-links { clear:both; height:440px; }
.hp-link-groups .link-group-links li { width:110px; margin-right:20px; float:left; line-height:30px; font-size:14px; overflow:hidden; height:30px; }
.hp-link-groups .link-group-links li.sp { width:100% !important; height:20px; overflow:hidden; }

.hp-event { margin-top:20px; border:solid 1px #f0eff4; padding:20px 0 20px 20px; background:#fff; }
.hp-event .hp-event-title { line-height:34px; height:40px; }
.hp-event .hp-event-title i { float:left; font-family:Arial; color:#65b85c; font-style:normal; font-size:20px; font-weight:lighter; font-family:微软雅黑; display:inline-block; line-height:30px; height:30px; overflow:hidden; text-align:center; margin-right:10px; }
.hp-event .hp-event-title span { float:left; width:100px; color:#999; font-size:18px; display:inline-block; }
.hp-event .hp-event-images { padding-top:20px; }
.hp-event .hp-event-images li { position:relative; list-style:none; width:540px; float:left; margin:0 19px 20px 19px; overflow:hidden; text-align:center; }
.hp-event .hp-event-images li .img { width:540px; height:200px; display:block; overflow:hidden; }
.hp-event .hp-event-images li img { width:540px; height:215px; }
.hp-event .hp-event-images li .event-title { left:0; top:170px; z-index:99; position: absolute; width: 100%; height: 30px; line-height: 30px; font-size: 12px; color: #fff; background-color: rgba(0,0,0,.6); _background-color:#000; *background-color:#000; overflow: hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#99000000', endColorstr='#99000000'); }

.friend-links-area { border:solid 1px #f0eff4; padding:20px 0 20px 20px; margin-top:20px; background:#fff; }
.friend-links-title { line-height:34px; height:40px; }
.friend-links-title span { float:left; width:100px; color:#666; font-size:18px; display:inline-block; }
.friend-links { clear:both }
.friend-links li { width:85px; margin-right:20px; float:left; line-height:30px; font-size:14px; overflow:hidden; } 

/*
 * $5 footer
 */  
 
.footer { clear:both; padding:10px 0px 20px 0px; font-family:Verdana; color:#333; line-height:26px } 
.footer .links { overflow:hidden; text-align:center; } 
.footer .links a { padding-right:10px; margin-right:10px; border-right:solid 1px #ccc; }
.footer .links a.last { border-right:solid 0px #ccc; } 
.footer .copyright { overflow:hidden; text-align:center; color:#aaa; }  
.footer .copyright a { color:#aaa; }  
.footer img { vertical-align:middle; } 


/*
 * $6 pager
 */ 
 
.pager { height:35px;  padding-top:5px; padding-bottom:5px; text-align:center; font-size:14px; }
.pager a{text-decoration: none; height:30px; border-style:solid; border-bottom-width:1px ; border-left-width:1px; border-right-width:1px; border-top-width:1px;border-color:#ccc ; color:#666;  font-size:12px;   padding: 6px 8px 5px 8px; line-height: 16px; margin:1px;background-color:#eee ; }
.pager a:hover{text-decoration: none; height:30px; border-style:solid; border-bottom-width:1px ; border-left-width:1px; border-right-width:1px; border-top-width:1px;border-color:#ccc ; color:#222;  font-size:12px;  padding: 6px 8px 5px 8px; line-height: 16px; margin:1px;background-color:#ddd ; } 
.pager font{text-decoration: none; height:30px; border-style:solid; border-bottom-width:1px ; border-left-width:1px; border-right-width:1px; border-top-width:1px;border-color:#ccc ; color:#333333;  font-size:12px;  padding: 6px 8px 5px 8px; line-height: 16px; margin:1px; background-color:#ffffff ; }
   
   
/*
 * $7 QQ
 */ 
 
#qq_float { text-align:center; background:url(../images/qq.gif) no-repeat ; height:177px; width:109px; position:fixed !important;/*ie7 ff*/ position:absolute; right:10px; top:50px;  z-index:999; }
#qq_float_head { height:36px; overflow:hidden;  cursor:pointer; margin-bottom:10px; }
#qq_float .links { padding-top:100px; text-align:center; color:#4e6076; text-align:center; line-height:18px; } 
#qq_float .links ul li { padding-top:5px;  background:url(../images/qq.gif) no-repeat 0px -140px ; } 
#qq_float .qq_but { background:url(../images/qq.gif) no-repeat 0px bottom ; height:10px; overflow:hidden; } 


/*
 * $8 side contact
 */ 
 
.side-contact{ width:211px; height:150px; overflow:hidden; background:url('../images/side-contact-bg.gif') 0px 0px no-repeat; }
.side-contact p { padding:50px 20px 0px 15px; line-height:20px; }
.side-contact a:hover { color:#333; text-decoration:none; }


/*
 * $9 website details page
 */  
 
.website-details { margin-bottom:20px; border:solid 1px #f0eff4; padding:20px 40px 20px 40px; background:#fff; }
.website-details .website-title { line-height:34px; height:54px; font-size:24px; border-bottom:solid 1px #eee; margin-bottom:20px; }
.website-details .website-title span { float:right; margin-left:20px; font-size:12px; color:#666; }
.website-details .website-profile { width:474px; float:left; }
.website-details .website-screenspot { width:300px; height:200px;border:solid 1px #eee;  overflow:hidden; float:left; margin-left:40px; margin-top:10px; }
.website-details .website-screenspot .img { width:300px; }
.website-details .company-logo { width:100px; height:40px; border:solid 1px #eee; }
.website-details .company-introduce-title { clear:both; line-height:40px; height:40px; font-size:20px; color:#666; border-bottom:solid 1px #eee; padding-bottom:10px; padding-top:20px; }
.website-details .company-introduce { line-height:1.6; font-size:14px; text-indent:2em; padding:20px 0 20px 0; }
.website-details .company-introduce p { padding:5px 0 5px 0; }
.website-details .company-introduce div { padding:5px 0 5px 0; }
.website-details .company-introduce table { border-collapse:collapse;border:1px solid #dddddd; width:100%; }
.website-details .company-introduce table th { border:1px solid #dddddd;text-align : center; padding:3px 6px; font-size:12px; color:#666666; font-weight:bold; background-color:#eeeeee; }
.website-details .company-introduce table th span { font-weight:lighter; } 
.website-details .company-introduce table td { border:1px solid #dddddd;text-align : center; padding:3px 6px; font-size:12px; }
.website-details .company-introduce table td span { font-weight:lighter; }
.website-details .profile-labels li { float:left; font-size:14px; line-height:22px; color:#666; padding:5px 0 5px 0; }
.website-details .profile-labels li.l { width:100px; clear:both; color:#999; } 
.website-details .profile-labels li.lc { width:600px; }
.website-details .profile-labels li.logo-li span { display:inline-block; float:left; padding-left:20px; }
.website-details .profile-labels li.logo-li img { float:left; }
.website-details .link-go-company { clear:both; text-align:center; padding-top:30px; }
.website-details .link-go-company a { width:200px; margin:auto; line-height:40px; height:40px; display:block; text-align:center; color:#fff; background:#19cb8d; font-size:14px; }
.website-details .link-go-company a:hover { color:#fff; background:#33e2a5; text-decoration:none; }
.website-details .like-btn-area { text-align:center; margin:20px 0 40px 0; color:#333; }
.website-details .like-btn-area .icon-good { cursor:pointer; margin:auto; display:block; width:80px; height:79px; color:#fff; background:url('../images/btn-good.gif'); font-style:normal; line-height:40px; font-size:14px; }
.website-details .like-btn-area .icon-good-submited { background:url('../images/btn-good.gif') 0 -80px; }
.website-details-1col .website-profile { width:774px; float:left; }



.side-recmmmand-logo { margin-bottom:20px; border:solid 1px #f0eff4; padding:20px 0 20px 27px; background:#fff; }
.side-recmmmand-logo-title { font-size:20px; color:#666; margin-bottom:20px; }
.side-recmmmand-logos li { float:left; width:100px; margin-bottom:10px; margin-right:20px; float:left; text-align:center; }
.side-recmmmand-logos li img { width:100px; height:40px; border:solid 1px #f0eff4;  }
.side-recmmmand-logos li span { font-size:12px; line-height:18px; color:#aaa; }
.side-recmmmand-logos li a:hover span { color:#33e2a5; text-decoration:none !important; }

.website-gallery { margin-bottom:20px; border:solid 1px #f0eff4; padding:20px 0 20px 40px; background:#fff; }
.website-gallery-title { font-size:20px; color:#666; margin-bottom:20px; }
.website-gallery ul li { float:left; width:189px; margin-bottom:20px; margin-right:20px; float:left; text-align:center; }
.website-gallery ul li img { width:186px; height:142px; border:solid 1px #f0eff4;  }
.website-gallery ul li span { font-size:14px; line-height:30px; }
.website-gallery ul li a:hover span { color:#33e2a5; text-decoration:none !important; } 
.website-gallery-1col ul li { float:left; width:189px; margin-bottom:20px; margin-right:42px; float:left; text-align:center; }

.side-ad-box { margin-bottom:20px; background:#fff; }


/*
 * $10 website list page
 */  
 
.recmmmand-brands { }
.recmmmand-brands-title { line-height:34px; height:40px; color:#999; font-size:18px; }
.recmmmand-brands-logos li { float:left; height:98px; width:150px; overflow:hidden; text-align:center; }
.recmmmand-brands-logos li a { display:block; height:56px; width:148px; overflow:hidden; border:solid 1px #f0eff4; background:#fff; padding:20px 0 20px 0; }
.recmmmand-brands-logos li img { width:100px; height:40px; }
.recmmmand-brands-logos a span { display:block; line-height:24px; font-size:14px; text-align:center; color:#ccd5e2; text-decoration:none; }
.recmmmand-brands-logos a:hover { text-decoration:none; border:solid 1px #65b85c; }

.all-brands { margin-top:20px; border:solid 1px #f0eff4; padding:20px 40px 20px 40px; background:#fff; }
.all-brands-title { line-height:34px; height:40px; color:#65b85c; font-size:18px; margin-bottom:20px; border-bottom:solid 1px #f3f3f3; padding-bottom:10px; }
.all-brands-links {}
.all-brands-links li { float:left; width:18%; margin-right:2%; line-height:30px; overflow:hidden; height:30px; font-size:14px; }
.all-brands-links li.sp { width:1118px; clear:both; height:20px; margin-bottom:20px;  border-bottom:solid 1px #f3f3f3; }

/*
 * $11 list-box
 */ 

.list-box { border:solid 1px #dededf; padding:0px; background-color:#fff; }
.list-box h1 { border-bottom:solid 1px #dededf; padding:20px; font-size:22px; line-height:24px; margin:0; color:#656565; font-family:微软雅黑; background:#f6f6f6; }
.list-box .l2_recommand { }
.list-box .l2_recommand .group { border:0; }
.list-box .l1_subclass_nav { padding:20px 0 20px 40px; }
.list-box .l1_subclass_nav ul li { width:155px; height:30px; float:left; overflow:hidden; font-size:14px; }
.list-box .ads { padding:20px 0 20px 40px; border-top:solid 1px #dededf;  }
.list-box .ads h2 { font-size:14px; line-height:20px; margin:0 0 0px 0; color:#656565; }
.list-box .ads ul li { width:200px; height:220px; padding:10px 35px 0px 0; float:left; overflow:hidden; font-size:14px; text-align:center; }
.list-box .ads ul li img { width:200px; height:160px; }
.list-box .ads ul li h3 { height:30px; line-height:30px; overflow:hidden; font-size:14px; font-weight:lighter; }
.list-box .ads ul li p { height:18px; line-height:18px; overflow:hidden; color:#999; font-size:12px; }
.list-box .group { clear:both; padding:20px 0px 20px 20px; border-top:solid 1px #dededf; }
.list-box .group .group-left { float:left; width:170px; overflow:hidden; padding-left:20px; }
.list-box .group .group-right { float:left; width:750px; overflow:hidden; }
.list-box .group .group-left h2 { padding:0px; margin:0px; color:#656565; font-size:14px; font-weight:bold; line-height:31px } 
.list-box .group .group-left h2 span { color:#aaa; font-size:14px; font-weight:lighter; line-height:31px } 
.list-box .group .group-left a:hover h2 { color:#ff3300; } 
.list-box .group .group-left a:hover h2 span { color:#ff3300; }  
.list-box .group .group-right li { float:left; width:150px; height:31px; overflow:hidden; }
.list-box .group .group-right li a { display:inline-block; float:left; line-height:31px; height:31px; font-size:14px; padding:0px 0px 0px 0px; overflow:hidden; }
.list-box a { }
.list-box a:link { color:#0052a4; }
.list-box a:visited { color:#0052a4; }
.list-box a:hover { color:#ff3300; }
.list-box .group .end { clear:both; height:1px; overflow:hidden; line-height:1px; }

/*
 * $12 common
 */  
#tbox { width:150px;height:150px;position: fixed; bottom:10px; right:10px; -webkit-transition: opacity .4s ease-in-out;-moz-transition: opacity .4s ease-in-out;-o-transition: opacity .4s ease-in-out;opacity: 1;z-index:100020; _position:absolute; _bottom:80px; _top: expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight-80+'px');}
#btn_gotop { display:none; }
#btn_gotop a{ display:block; width:46px; height:46px; background:url(../images/go-top.png) no-repeat ;  background-color: #444;  background-color: rgba(0,0,0,.6);cursor:pointer; margin-bottom:10px;  -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border:1px #ddd solid; } 
#btn_gotop a:hover { text-decoration:none; background:url(../images/go-top.png) 0 -47px no-repeat ; }
#btn_qr_img { display:block; width:60px; height:40px; border-radius:2px; cursor:pointer; background:url(../images/skin.png) -291px -64px no-repeat #fff; }
#btn_gotop_warp { width:46px; height:46px; } 
 
.tabs {}
.tabs .title { border-bottom:solid 1px #d9d9d9; overflow:hidden; }
.tabs .title ul { margin:0px; padding:0px 0px 0px 20px; list-style:none; }
.tabs .title li { float:left; color:#666666; cursor:pointer; }
.tabs .title li.on { cursor:default; }
.tabs .content .tab_content { display:none; }
.tabs .content .on { display:block; }

.banner-ad { text-align:center; padding:10px; }
.sitemap-h1 { border-bottom:solid 1px #dededf; padding:20px; font-size:22px; line-height:24px; margin:0; color:#656565; font-family:微软雅黑; background:#f6f6f6; }
.sitemap .sitemap-group-name { color:#656565; }
.sitemap .sitemap-group-name:link { color:#656565; }
.sitemap .sitemap-group-name:visited { color:#656565; }
.sitemap .sitemap-group-name:hover { color:#ff3300; }

.side-qr {border:solid 1px #dededf;
  position:fixed;
  _position: fixed;
  z-index: 999;
  left: 50%;
  bottom: 20px;
  margin-left: 520px;
  width: 110px;
  height: 130px;
  background: url(../images/qr.gif);
}

.tuoge-float-ad {
    position: fixed;
    z-index: 999;
    display: block;
    width: 100px;
    height: 100px;
    right: 20px;
    bottom: 20px;
}

.tuoge-float-ad a {
    display: block;
}

.tuoge-float-ad img {
    width: 100px;
    height: 100px;
}